{"version": "2.0","name": "Matrox Documentation","subline": "Material design based mutipurpose HTML Template","username": "Trendy Theme","created": "07/01/2016","website": "http://trendytheme.net/","update": "08/23/2016","update_today": true,"email": "trendytheme.net@gmail.com","description": "","intro": "Thank you very much for purchasing our template! If you have any questions that aren't covered in this documentation, please feel free to email us.","button_1_text": "","button_2_text": "","button_3_text": "","button_1_url": "","button_2_url": "","button_3_url": "","sections": [{"title": "Overview","id": "overview","content": "<div>\n\t<strong>Matrox</strong> is a material design based multi-purpose responsive html template.</div>\n<div>\n\tBy utilizing elements and principles of Material Design, Matrox comes with 200+ HTML pages and over 150+ unique content blocks.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>Matrox</strong> empowers you to build sites under Corporate, Creative, Agency, Restaurant, Blog, Charity, Consulting Firm, Portfolio, Construction, Parallax, App Landing, Book Opening and much more categories. Moreover <strong>Matrox</strong> comfortably suits all common website styles.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>Matrox </strong>is fully responsive and built with bootstrap framework, be sure that it will fit any viewing device.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tLet&#39;s have a quick look on features that <strong>Matrox</strong> have:</div>\n<ul>\t<li>\t\t5 Full Website Demo</li>\n\t<li>\t\t14 Pre-defined Home Layouts</li>\n\t<li>\t\t5 Powerful Slide Designs</li>\n\t<li>\t\t5 Unique Text Rotator Slider</li>\n\t<li>\t\t3 Static Hero Unit</li>\n\t<li>\t\t2 Cloud and html Video Background</li>\n\t<li>\t\t10 Unique Header Styles</li>\n\t<li>\t\t12 Unique Navigation Styles</li>\n\t<li>\t\t15 Icon Feature Styles</li>\n\t<li>\t\t10 Unique Blog Layouts</li>\n\t<li>\t\t16 CTA Styles</li>\n\t<li>\t\t8 Content Tabs Styles</li>\n\t<li>\t\t8 Client Testimonial Styles</li>\n\t<li>\t\t5 Unique Footer Styles</li>\n\t<li>\t\t5 Unique Alert Style</li>\n\t<li>\t\t4 Unique Accordion Style</li>\n\t<li>\t\t4 Unique Portfolio Styles</li>\n\t<li>\t\t4 Unique Team Member Styles</li>\n\t<li>\t\t4 Client/Brand Logo Styles</li>\n\t<li>\t\t3 Counter Styles</li>\n\t<li>\t\t2 Progress Styles</li>\n\t<li>\t\t2 Dynamic Contact Form</li>\n\t<li>\t\t2 login Page Layouts</li>\n\t<li>\t\t2 404 Error Page Layouts</li>\n\t<li>\t\tUnlimited Button Style</li>\n\t<li>\t\tParallax and video Sections</li>\n\t<li>\t\tMulti-column &quot;Mega Menu&quot; and multi-level &quot;Drop-Down&quot; menus</li>\n\t<li>\t\tBased on Bootstrap, the familiar grid mark-up you know and love!</li>\n\t<li>\t\tCross Browser Compatible</li>\n</ul>\n<p>\tand much more&hellip;</p>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>Premium Features</strong></div>\n<div>\n\t===========================</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t1. Premium Revolution Slider ($14 Value)</div>\n<div>\n\t2. Premium Menuzord - Responsive Megamenu ($7 Value)</div>\n<div>\n\t3. Free Update</div>\n<div>\n\t4. Excellent Customer Support</div>\n"},{"title": "Installation","id": "installation","content": "<p>\t1. Unzip the file and find out the folder matrox. There are all html template files in this folder.</p>\n<p>\t2. Folder Structure is as follows</p>\n<pre class=\"html\" style=\"background-image: url(&quot;../../_img/pre_bg.png&quot;);\">\nassets (all assets/required file of this template)\n--/bootstrap (bootstrap core files)\n--/css (all css files)\n--/flexSlider (flexSlider plugin)\n--/fonts (font-awesome font icon set )\n--/img (all images)\n--/js (all javascript files)\n--/magnific-popup (plugin for light-box)\n--/materialize (material css and js)\n--/owl-carousel (owl-carousel core files)\n--/slider-revolution (all slider-revolution files are here)\n--/videos (html5 video formats)\nemail-templates (a basic email template functional with contact form)\nindex.html (Home page)\nsendemail.php (PHP file for functional contact form)\n</pre>\n<p>\t3. &nbsp;You will need to Upload these files to your Web Server using FTP or cpanel in order to use it on your Website. And other files can be used according to your preferences.</p>\n<p>\t4. Now enjoy the theme and adding section/feature according to your need.</p>\n"},{"title": "HTML Structure","id": "html_structure","content": "<p>\tBeing based on Bootstrap, <strong>Matrox</strong> inherits its awesome grid system. It&#39;s a responsive, mobile first &nbsp;grid that appropriately scales up to 12 columns as the device or view port size increases.</p>\n<pre class=\"html\">\n&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;!--  meta tag --&gt;\n    &lt;meta charset=&quot;utf-8&quot;&gt;\n    &lt;title&gt;Title goes here&lt;/title&gt;\n    &lt;!--  favicon --&gt;\n    &lt;link rel=&quot;shortcut icon&quot; href=&quot;assets/img/ico/favicon.png&quot;&gt;    \n    &lt;!--common style--&gt;\n   ...\n&lt;/head&gt;\n\n&lt;body id=&quot;top&quot; &gt;\n\n    &lt;!--header start--&gt;\n    &lt;header id=&quot;header&quot; class=&quot;tt-nav transparent-header&quot;&gt;\n       ...\n    &lt;/header&gt;\n    &lt;!--header end--&gt;\n\n    &lt;!--slider revolution start--&gt;\n    &lt;section class=&quot;slider-revolution-wrapper&quot;&gt;\n        ...\n    &lt;/section&gt;\n    &lt;!--slider revolution end--&gt;\n\n    &lt;!--body content start--&gt;\n    &lt;section class=&quot;section-padding&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n            &lt;div class=&quot;row&quot;&gt;\n                ...\n            &lt;/div&gt;&lt;!-- /.row --&gt;\n        &lt;/div&gt;&lt;!-- /.container --&gt;\n    &lt;/section&gt;\n    &lt;!--body content end--&gt;\n\n    &lt;!--footer start --&gt;\n    &lt;footer class=&quot;footer footer-four&quot;&gt;\n        &lt;!--primary footer--&gt;\n        &lt;div class=&quot;primary-footer&quot;&gt;\n            ...\n        &lt;/div&gt;\n        &lt;!--primary footer end--&gt;\n        &lt;!--secondary footer--&gt;\n        &lt;div class=&quot;secondary-footer&quot;&gt;\n            ...\n        &lt;/div&gt;\n        &lt;!--secondary footer end--&gt;\n    &lt;/footer&gt;\n    &lt;!--footer end--&gt;\n\n    &lt;!-- Preloader --&gt;\n    &lt;div id=&quot;preloader&quot;&gt;\n        &lt;div class=&quot;preloader-position&quot;&gt; \n            ...\n        &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;!-- End Preloader --&gt;\n\n&lt;!-- Placed js at the end of the document so the pages load faster --&gt;\n\n....\n\n&lt;/body&gt;\n&lt;/html&gt;</pre>\n"},{"title": "Logo Format","id": "logo_format","content": "<p>\tYou can find LOGO container into header section</p>\n<pre class=\"html\">\n&lt;!--logo start--&gt;\n&lt;a href=&quot;index.html&quot; class=&quot;logo-brand&quot;&gt;\n\n  &lt;img src=&quot;assets/img/logo.png&quot; alt=&quot;&quot;/&gt;\n\n&lt;/a&gt;\n&lt;!--logo end--&gt;</pre>\n<div>\n\tWe&#39;ve multi types of logo style - logo light, logo dark, logo colored like img/logo.png, img/logo-dark.png img/logo-colored.png. &nbsp;logo-dark should be used in light navigation.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tYou can use any kind of logo adjusting with Navigation Bar.</div>\n"},{"title": "Font Change","id": "font_change","content": "<div>\n\t<strong>Matrox </strong>uses&nbsp;google font. So you can feel free to use any google font what you like best.</div>\n<div>\n\t<strong>Matrox </strong>used &quot;Raleway&quot; google font for main demo, &nbsp;&quot;Lora&quot; and &quot;Raleway&quot; combined in Digital Agency demo and &quot;Roboto&quot; &nbsp;and &quot;Raleway&quot; combined in Resturent Demo.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tYou can find the Link to the&nbsp;<span style=\"color: rgb(232, 191, 106); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">&lt;head&gt;</span>&nbsp;&nbsp;tag of all the&nbsp;<span style=\"color: rgb(169, 183, 198); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">.html</span>&nbsp;files like this</div>\n<pre class=\"html\">\n<span style=\"line-height: 19px;\">&lt;link href=&#39;https://fonts.googleapis.com/css?family=Raleway:400,300,500,700,900&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;&gt;</span></pre>\n<div>\n\t&nbsp;</div>\n<div>\n\tAnd you have to add the font name into css file like&nbsp;</div>\n<pre class=\"css\">\nfont-family: &#39;Raleway&#39;, sans-serif !important;</pre>\n"},{"title": "Navigation","id": "navigation","content": "<p>\tYou can choose any one of the menu from our 12 menu style for your website navigation.</p>\n<ol>\n\t<li>\t\tLight/White menu</li>\n\t<li>\t\tDark menu</li>\n\t<li>\t\tTransparent menu</li>\n\t<li>\t\tSemi Transparent menu</li>\n\t<li>\t\tFloating menu</li>\n\t<li>\t\tCenter Menu</li>\n\t<li>\t\tBottom position menu</li>\n\t<li>\t\tBorder Bottom menu</li>\n\t<li>\t\tBox menu</li>\n\t<li>\t\tBorder Box menu</li>\n\t<li>\t\tBrand Color Menu</li>\n\t<li>\t\tToggole Menu</li>\n</ol>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>Light Menu:</strong></div>\n<div>\n\t====================</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tHtml structure of <strong>Light Menu.</strong></div>\n<div>\n\t<pre class=\"html\">\n&lt;!--header start--&gt;\n&lt;header id=&quot;header&quot; class=&quot;tt-nav&quot;&gt;\n    &lt;div class=&quot;header-sticky light-header&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n            &lt;div id=&quot;matrox-menu&quot; class=&quot;menuzord&quot;&gt;\n\n                &lt;!--logo start--&gt;\n                &lt;a href=&quot;index.html&quot; class=&quot;logo-brand&quot;&gt;\n                    &lt;img src=&quot;assets/img/logo.png&quot; alt=&quot;&quot;/&gt;\n                &lt;/a&gt;\n                &lt;!--logo end--&gt;\n\n                &lt;!--mega menu start--&gt;\n                &lt;ul class=&quot;menuzord-menu pull-right&quot;&gt;\n                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt; &lt;/li&gt;\n                    ...\n                &lt;/ul&gt;\n                &lt;!--mega menu end--&gt;\n\n            &lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/header&gt;\n&lt;!--header end--&gt;</pre>\n\t<p>\t\t&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n\t<div>\n\t\t<strong>Drak Menu :</strong></div>\n\t<div>\n\t\t===================</div>\n\t<div>\n\t\t&nbsp;</div>\n\t<div>\n\t\tHtml structure of <strong>Dark Menu.</strong> &nbsp;Just add class name &nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">dark-header</span>&nbsp;into &nbsp;<span style=\"color: rgb(102, 102, 102); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;\">&nbsp;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&lt;div&nbsp;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(186, 186, 186);\">class=</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(165, 194, 97);\">&quot;header-sticky dark-header&quot;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&gt;</span></div>\n\t<div>\n\t\t&nbsp;</div>\n\t<div>\n\t\t<pre class=\"html\">\n&lt;!--header start--&gt;\n&lt;header id=&quot;header&quot; class=&quot;tt-nav&quot;&gt;\n    &lt;div class=&quot;header-sticky dark-header&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n            &lt;div id=&quot;matrox-menu&quot; class=&quot;menuzord&quot;&gt;\n                ...\n            &lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/header&gt;\n&lt;!--header end--&gt;</pre>\n\t\t<p>\t\t\t&nbsp;</p>\n\t\t<p>\t\t\t&nbsp;</p>\n\t\t<div>\n\t\t\t<strong>Transparent Menu :</strong></div>\n\t\t<div>\n\t\t\t====================</div>\n\t\t<div>\n\t\t\t&nbsp;</div>\n\t\t<div>\n\t\t\tHtml structure of <strong>Transparent Menu</strong>. &nbsp;Just add class name&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">transparent-header</span>&nbsp;&nbsp;into <strong>header</strong> tag</div>\n\t\t<pre class=\"html\">\n&lt;!--header start--&gt;\n&lt;header id=&quot;header&quot; class=&quot;tt-nav transparent-header&quot;&gt;\n\n    &lt;div class=&quot;header-sticky light-header&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n            &lt;div id=&quot;matrox-menu&quot; class=&quot;menuzord&quot;&gt;\n                ...\n            &lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n\n&lt;/header&gt;\n&lt;!--header end--&gt;</pre>\n\t</div>\n</div>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>Semi Transparent Menu :</strong></div>\n<div>\n\t==========================</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tHtml structure of <strong>Semi Transparent Menu</strong>. In semi transparent menu should class name&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">transparent-header</span>&nbsp;&nbsp;into <strong>header</strong> tag. And class name&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">semi-transparent</span>&nbsp;into&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">header-sticky</span>&nbsp;&nbsp;tag. &nbsp;And need class name&nbsp;<span style=\"color: rgb(102, 102, 102); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;\">&nbsp;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; color: rgb(165, 194, 97); line-height: 19px; background-color: rgb(43, 43, 43);\">light</span><span style=\"color: rgb(102, 102, 102); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;\">&nbsp;</span>into&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&lt;ul&nbsp;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(186, 186, 186);\">class=</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(165, 194, 97);\">&quot;menuzord-menu pull-right light&quot;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&gt;</span><span style=\"color: rgb(102, 102, 102); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;\">&nbsp;</span>&nbsp;tag for white color menu.</div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;!--header start--&gt;\n&lt;header id=&quot;header&quot; class=&quot;tt-nav transparent-header&quot;&gt;\n\n    &lt;div class=&quot;header-sticky semi-transparent&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n            &lt;div id=&quot;matrox-menu&quot; class=&quot;menuzord&quot;&gt;\n                &lt;ul class=&quot;menuzord-menu pull-right light&quot;&gt;\n                ...\n                &lt;/ul&gt;\n            &lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n\n&lt;/header&gt;\n&lt;!--header end--&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>Floating Menu:</strong></div>\n<div>\n\t==================</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tHtml structure of <strong>Floating Menu</strong>. In scrolling page of floating menu apper alternate menu.</div>\n<div>\n\tStructure as follows..</div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;!--header start--&gt;\n&lt;header id=&quot;header&quot; class=&quot;tt-nav transparent-header floating-menu&quot;&gt;\n\n    &lt;div class=&quot;header-sticky &quot;&gt;\n        &lt;div class=&quot;container mainmenu light-nav &quot;&gt;\n            &lt;div id=&quot;matrox-menu&quot; class=&quot;menuzord&quot;&gt;\n                &lt;ul class=&quot;menuzord-menu pull-right&quot; id=&quot;menu-list&quot;&gt;\n                ...\n                &lt;/ul&gt;\n            &lt;/div&gt;\n        &lt;/div&gt;\n\n        &lt;!--alternate menu appear start--&gt;\n        &lt;div class=&quot;menu-appear-alt&quot; &gt;\n            &lt;div class=&quot;container&quot;&gt;\n                &lt;div id=&quot;matrox-menu-alt&quot; class=&quot;menuzord&quot; &gt;\n                    &lt;!--alternate menu appearing here ... --&gt;\n                &lt;/div&gt;\n            &lt;/div&gt;\n        &lt;/div&gt;\n        &lt;!--alternate menu appear end--&gt;\n\n    &lt;/div&gt;\n&lt;/header&gt;\n&lt;!--header end--&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>Center Menu:</strong></div>\n<div>\n\t================</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tHtml structure of <strong>Center Menu</strong>.&nbsp;</div>\n<pre class=\"html\">\n&lt;!--header start--&gt;\n&lt;header id=&quot;header&quot; class=&quot;tt-nav nav-center-align&quot;&gt;\n    &lt;div class=&quot;light-header&quot;&gt;\n        &lt;div class=&quot;container mainmenu&quot;&gt;\n            &lt;div id=&quot;matrox-menu&quot; class=&quot;menuzord&quot;&gt;\n                &lt;!--logo start--&gt;\n                &lt;a href=&quot;index.html&quot; class=&quot;logo-brand&quot;&gt;\n                    &lt;img class=&quot;retina&quot; src=&quot;img/logo.png&quot; alt=&quot;&quot;/&gt;\n                &lt;/a&gt;\n                &lt;!--logo end--&gt;\n\n                &lt;!--mega menu start--&gt;\n                &lt;ul class=&quot;menuzord-menu border-tb&quot; id=&quot;menu-list&quot;&gt;\n                    ...\n                &lt;/ul&gt;\n                &lt;!--mega menu end--&gt;\n            &lt;/div&gt;\n        &lt;/div&gt;\n        &lt;!--alternate menu appear start--&gt;\n\n        &lt;div class=&quot;menu-appear-alt&quot; &gt;\n            &lt;div class=&quot;container&quot;&gt;\n                &lt;div id=&quot;matrox-menu-alt&quot; class=&quot;menuzord&quot; &gt;\n                    &lt;!--alternate menu appearing here ... --&gt;\n                &lt;/div&gt;\n            &lt;/div&gt;\n        &lt;/div&gt;\n        &lt;!--alternate menu appear end--&gt;\n    &lt;/div&gt;\n&lt;/header&gt;\n&lt;!--header end--&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>Bottom Possition Menu:</strong></div>\n<div>\n\t==========================</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tHtml structure of <strong>Bottom Menu</strong>. add class name&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">nav-bottom</span>&nbsp;&nbsp;into&nbsp;<span style=\"color: rgb(232, 191, 106); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">header</span>&nbsp;tag</div>\n<pre class=\"html\">\n&lt;!--header start--&gt;\n&lt;header id=&quot;header&quot; class=&quot;tt-nav nav-bottom&quot;&gt;\n    &lt;div class=&quot;light-header&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n            &lt;div id=&quot;matrox-menu&quot; class=&quot;menuzord&quot;&gt;\n                &lt;!--logo start--&gt;\n                &lt;a href=&quot;index.html&quot; class=&quot;logo-brand&quot;&gt;\n                    &lt;img src=&quot;img/logo.png&quot; alt=&quot;&quot;/&gt;\n                &lt;/a&gt;\n                &lt;!--logo end--&gt;\n\n                &lt;!--mega menu start--&gt;\n                &lt;ul class=&quot;menuzord-menu dark pull-right&quot;&gt;\n                    ...\n                &lt;/ul&gt;    \n                &lt;!--mega menu end--&gt;\n            &lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/header&gt;\n&lt;!--header end--&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>Border Bottom Menu:</strong></div>\n<div>\n\t==========================</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tHtml structure of <strong>Border Bottom Menu</strong>. In Border Bottom Menu add class name&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">nav-border-bottom</span>&nbsp; into&nbsp;<span style=\"color: rgb(232, 191, 106); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">header</span>&nbsp;&nbsp;tag.</div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;!--header start--&gt;\n&lt;header id=&quot;header&quot; class=&quot;tt-nav nav-border-bottom&quot;&gt;\n    &lt;div class=&quot;header-sticky light-header&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n            &lt;div id=&quot;matrox-menu&quot; class=&quot;menuzord&quot;&gt;\n                ...\n            &lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/header&gt;\n&lt;!--header end--&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>Box Menu:</strong></div>\n<div>\n\t===========</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tHtml structure of <strong>Box Menu.</strong> Just add class name&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">nav-boxed-color</span>&nbsp; into &nbsp;&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&lt;div&nbsp;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(186, 186, 186);\">class=</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(165, 194, 97);\">&quot;header-sticky light-header&quot;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&gt;</span></div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;!--header start--&gt;\n&lt;header id=&quot;header&quot; class=&quot;tt-nav&quot;&gt;\n    &lt;div class=&quot;header-sticky light-header nav-boxed-color&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n            &lt;div id=&quot;matrox-menu&quot; class=&quot;menuzord&quot;&gt;\n                ...\n            &lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/header&gt;\n&lt;!--header end--&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>Border Box Menu:</strong></div>\n<div>\n\t=================</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tHtml structure of <strong>Border Box Menu</strong>. Just add class name&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">nav-boxed-box</span>&nbsp; &nbsp;into &nbsp;&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&lt;div&nbsp;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(186, 186, 186);\">class=</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(165, 194, 97);\">&quot;header-sticky light-header&quot;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&gt;</span></div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;!--header start--&gt;\n&lt;header id=&quot;header&quot; class=&quot;tt-nav&quot;&gt;\n    &lt;div class=&quot;header-sticky light-header nav-border-box&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n            &lt;div id=&quot;matrox-menu&quot; class=&quot;menuzord&quot;&gt;\n                ...\n            &lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/header&gt;\n&lt;!--header end--&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>Brand Color Menu:</strong></div>\n<div>\n\t=================</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tHtml structure of <strong>Brand Color Menu</strong>. Just add class name&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">brand-header</span>&nbsp; &nbsp;into &nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&lt;div&nbsp;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(186, 186, 186);\">class=</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(165, 194, 97);\">&quot;header-sticky&quot;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&gt;</span></div>\n<div>\n\t<strong>Brand Header</strong> color is changeable, you can change brand-header color by replacing your own brand color from &nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">header.css</span></div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;!--header start--&gt;\n&lt;header id=&quot;header&quot; class=&quot;tt-nav&quot;&gt;\n    &lt;div class=&quot;header-sticky brand-header&quot;&gt;\n        &lt;div class=&quot;container&quot;&gt;\n            &lt;div id=&quot;matrox-menu&quot; class=&quot;menuzord&quot;&gt;\n                ...\n            &lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/header&gt;\n&lt;!--header end--&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>Toggole Menu:</strong></div>\n<div>\n\t=================</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>Toggole Menu</strong> used in <strong>Digital Agency Demo</strong>. You have to write some css and little javascript code for toggle menu. You will find all css in&nbsp;&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">style.css</span>&nbsp;and javascript code in&nbsp;&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">script.js</span>&nbsp;of <strong>Digital Agency Demo</strong>.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tHtml structure is like:</div>\n<pre class=\"html\">\n&lt;header&gt;\n  &lt;a class=&quot;tt-logo&quot; href=&quot;index.html&quot;&gt;\n      &lt;img src=&quot;assets/img/logo.png&quot; alt=&quot;Logo&quot;&gt;\n  &lt;/a&gt;\n\n  &lt;div class=&quot;nav-wrapper&quot; id=&quot;toggle&quot;&gt;\n      &lt;span class=&quot;top&quot;&gt;&lt;/span&gt;\n      &lt;span class=&quot;middle&quot;&gt;&lt;/span&gt;\n      &lt;span class=&quot;bottom&quot;&gt;&lt;/span&gt;\n  &lt;/div&gt;\n\n  &lt;div class=&quot;nav-overlay&quot; id=&quot;overlay&quot;&gt;\n\n   &lt;nav class=&quot;overlay-menu&quot;&gt;\n     &lt;ul&gt;\n        &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;\n     &lt;/ul&gt;\n   &lt;/nav&gt;\n  &lt;/div&gt;\n\n&lt;/header&gt;</pre>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tJavaScript code is like:</div>\n<pre class=\"js\">\n/* ======= Full Screen Menu ======= */\n$(&#39;#toggle&#39;).on(&#39;click&#39;, function() {\n  $(this).toggleClass(&#39;active&#39;);\n  $(&#39;#overlay&#39;).toggleClass(&#39;open&#39;);\n});</pre>\n<p>\t&nbsp;</p>\n"},{"title": "Search Button","id": "search_button","content": "<div>\n\tThere is a search button in right corner of every menu. You can add or remove it vary easily. Add&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&lt;div&nbsp;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(186, 186, 186);\">class=</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(165, 194, 97);\">&quot;search-wrapper&quot;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&gt;</span>&nbsp; div with it&#39;s all inner content just before&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&lt;div&nbsp;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(186, 186, 186);\">class=</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(165, 194, 97);\">&quot;menuzord&quot;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&gt;&nbsp;</span>&nbsp;into&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">container</span>&nbsp; section. And add&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">.has-header-search</span>&nbsp;class in&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&lt;body&nbsp;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(186, 186, 186);\">id=</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(165, 194, 97);\">&quot;top&quot;&nbsp;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&gt;&nbsp;</span>tag for proper alignment of search button.&nbsp;</div>\n<pre class=\"html\">\n&lt;body id=&quot;top&quot; class=&quot;has-header-search&quot;&gt;\n\n &lt;!--header start--&gt;\n &lt;header id=&quot;header&quot; class=&quot;tt-nav&quot;&gt;\n   &lt;div class=&quot;header-sticky light-header&quot;&gt;\n    &lt;div class=&quot;container&quot;&gt;\n\n     &lt;div class=&quot;search-wrapper&quot;&gt;\n      &lt;div class=&quot;search-trigger pull-right&quot;&gt;\n        &lt;div class=&#39;search-btn&#39;&gt;&lt;/div&gt;\n         &lt;i class=&quot;material-icons&quot;&gt;search&lt;/i&gt;\n       &lt;/div&gt;\n\n      &lt;!-- Modal Search Form --&gt;\n      &lt;i class=&quot;search-close material-icons&quot;&gt;close&lt;/i&gt;\n      &lt;div class=&quot;search-form-wrapper solid-bg&quot;&gt;\n\n     &lt;form action=&quot;#&quot;&gt;\n      &lt;div class=&quot;input-field&quot;&gt;\n      &lt;input type=&quot;text&quot; name=&quot;search&quot; id=&quot;search&quot;&gt;\n      &lt;label for=&quot;search&quot; class=&quot;&quot;&gt;Search Here...&lt;/label&gt;\n      &lt;/div&gt;\n      &lt;button class=&quot;btn pink search-button waves-effect waves-light&quot; type=&quot;submit&quot;&gt;\n       &lt;i class=&quot;material-icons&quot;&gt;search&lt;/i&gt;\n    &lt;/button&gt;\n   &lt;/form&gt;\n\n   &lt;/div&gt;\n  &lt;/div&gt;&lt;!-- /.search-wrapper --&gt;\n\n   &lt;div id=&quot;matrox-menu&quot; class=&quot;menuzord&quot;&gt;\n\n    &lt;!--mega menu start--&gt;\n     &lt;ul class=&quot;menuzord-menu pull-right&quot;&gt;\n       &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt; &lt;/li&gt;\n       ...\n     &lt;/ul&gt;\n    &lt;!--mega menu end--&gt;\n\n    &lt;/div&gt;\n   &lt;/div&gt;\n   &lt;/div&gt;\n &lt;/header&gt;\n &lt;!--header end--&gt;\n\n&lt;/body&gt;</pre>\n<div>\n\t&nbsp;</div>\n"},{"title": "Icons","id": "icons","content": "<p>\tThere are two kinds of font icons used in this template.</p>\n<ol>\n\t<li>\t\tFontAwesome</li>\n\t<li>\t\tMaterial Icon</li>\n</ol>\n<p>\t<a href=\"http://fontawesome.io/icons/\"><strong>Font Awesome</strong></a> is a @font-face iconset that allows you to change size and color of the icons just using CSS.</p>\n<p>\tTo add an icon, simply create an empty element with class &#39;fa fa-[icon name]&#39;, for example:&nbsp;</p>\n<pre class=\"html\">\n&lt;i class=&quot;fa fa-file&quot;&gt;&lt;/i&gt;\n&lt;i class=&quot;fa fa-home&quot;&gt;&lt;/i&gt;\n&lt;i class=&quot;fa fa-envelope&quot;&gt;&lt;/i&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\t<strong>Material Icons</strong><br>\n\t====================</p>\n<p>\t<a href=\"https://design.google.com/icons/\"><strong>Material icons</strong></a> are beautifully crafted, delightful, and easy to use in your web, Android, and iOS projects, hosted by Google.</p>\n<p>\t<strong>Material Icon</strong> is also a @font-face iconset that allows you to change size and color of the icons just using CSS.</p>\n<p>\tThere are two options to add a material icon in your web site. You can simply add &nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&lt;i&nbsp;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(186, 186, 186);\">class=</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(165, 194, 97);\">&quot;material-icons&quot;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&gt;layers&lt;/i&gt;</span>&nbsp; icon name with&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">material-icons</span>&nbsp; class. &nbsp;Which is supported by all modern browser.</p>\n<p>\tIf you want to show all icons in Internet Explorar 9 or below you should add icons <strong>unicode</strong>&nbsp;like this&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&lt;i&nbsp;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(186, 186, 186);\">class=</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(165, 194, 97);\">&quot;material-icons&quot;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&gt;&amp;#xE53B;&lt;/i&gt;</span>&nbsp;&nbsp;</p>\n<pre class=\"html\">\n&lt;!-- For modern browsers. --&gt;\n&lt;i class=&quot;material-icons&quot;&gt;layers&lt;/i&gt;\n\n&lt;!-- For IE9 or below. --&gt;\n&lt;i class=&quot;material-icons&quot;&gt;&amp;#xE53B;&lt;/i&gt;</pre>\n<p>\t&nbsp;</p>\n<div>\n\tFor IE9 compatibility reason we used second option(with Unicode). You can simply use the first option.&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tHere <a href=\"https://design.google.com/icons/\">https://design.google.com/icons/</a> you will get 900+ <a href=\"https://design.google.com/icons/\"><strong>Material Icons</strong></a> and it&#39;s unicodes.&nbsp;</div>\n<div>\n\tJust click on a icon, a popup window will appear from bottom then click on <strong>&nbsp;</strong><span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">ICON FONT</span>&nbsp;from right top corner you will get both versions of each icon.</div>\n<p>\t&nbsp;</p>\n"},{"title": "Page Title","id": "page_title","content": "<div>\n\t<strong>Matrox</strong> have 10 different page title</div>\n<div>\n\t&nbsp;</div>\n<ol>\n\t<li>\t\tDefault Title</li>\n\t<li>\t\tBackground Title</li>\n\t<li>\t\tBackground Transparent Title</li>\n\t<li>\t\tParallax Transparent Title</li>\n\t<li>\t\tNo Background Title</li>\n\t<li>\t\tPattern Title</li>\n\t<li>\t\tCenter Align Title</li>\n\t<li>\t\tRight Align Title</li>\n\t<li>\t\tDark Title</li>\n\t<li>\t\tMini Title</li>\n</ol>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>1. Default Title</strong></div>\n<div>\n\t==================</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tDefault Page Title style with Text Left aligned &amp; Breadcrumbs Right aligned.</div>\n<div>\n\t<pre class=\"html\">\n&lt;!--page title start--&gt;\n&lt;section class=&quot;page-title ptb-50&quot;&gt;\n    &lt;div class=&quot;container&quot;&gt;\n        &lt;div class=&quot;row&quot;&gt;\n            &lt;div class=&quot;col-md-12&quot;&gt;\n                &lt;h2&gt;Default Page Title&lt;/h2&gt;\n                &lt;ol class=&quot;breadcrumb&quot;&gt;\n                    &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Shortcodes&lt;/a&gt;&lt;/li&gt;\n                    &lt;li class=&quot;active&quot;&gt;Page Title&lt;/li&gt;\n                &lt;/ol&gt;\n            &lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/section&gt;\n&lt;!--page title end--&gt;</pre>\n\t<div>\n\t\t&nbsp;</div>\n</div>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>2. Background Title</strong></div>\n<div>\n\t==================</div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;section class=&quot;page-title page-title-bg overlay ptb-190&quot;&gt;\n    ....\n&lt;/section&gt;  </pre>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>3. Fixed Background</strong></div>\n<div>\n\t=====================</div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;section class=&quot;page-title page-title-bg fixed-bg overlay ptb-190&quot;&gt;\n    ....\n&lt;/section&gt; </pre>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>4. Page Title Center</strong></div>\n<div>\n\t=====================</div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;section class=&quot;page-title page-title-center ptb-90&quot;&gt;\n    ....\n&lt;/section&gt; </pre>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>5. Page Title Dark</strong></div>\n<div>\n\t=====================</div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;section class=&quot;page-title dark-bg ptb-90&quot;&gt;\n    ....\n&lt;/section&gt; </pre>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>6. Page Title Parallax</strong></div>\n<div>\n\t=======================</div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;section class=&quot;page-title parallax-bg page-title-bg overlay ptb-190&quot; data-stellar-background-ratio=&quot;0.1&quot;&gt;\n    ....\n&lt;/section&gt; </pre>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>7. Page Title No BG</strong></div>\n<div>\n\t=======================</div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;section class=&quot;page-title ptb-50 no-bg&quot;&gt;\n    ....\n&lt;/section&gt;</pre>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>8. Page Title Pattern BG</strong></div>\n<div>\n\t=======================</div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;section class=&quot;page-title pattern-bg ptb-50&quot;&gt;\n    ....\n&lt;/section&gt; </pre>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>9. Page Title Right</strong></div>\n<div>\n\t=======================</div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;section class=&quot;page-title page-title-right ptb-50&quot;&gt;\n    ....\n&lt;/section&gt;</pre>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>10. Page Title Mini</strong></div>\n<div>\n\t=======================</div>\n<pre class=\"html\">\n&lt;section class=&quot;page-title ptb-30&quot;&gt;\n    ....\n&lt;/section&gt;</pre>\n"},{"title": "Page Section","id": "page_section","content": "<div>\n\tThe standard page section has the following...&nbsp;</div>\n<pre class=\"html\">\n&lt;section class=&quot;section-padding&quot;&gt;\n    &lt;div class=&quot;container&quot;&gt;\n      &lt;div class=&quot;text-center mb-80&quot;&gt;\n          &lt;h2 class=&quot;section-title text-uppercase&quot;&gt;Who we are&lt;/h2&gt;\n          &lt;p class=&quot;section-sub&quot;&gt;Quisque non erat mi. Etiam congue et augue sed tempus.&lt;/p&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;&lt;!-- /.container --&gt;\n&lt;/section&gt;</pre>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>Section Background color change</strong></div>\n<div>\n\t=================================</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tYou can change the section background color. like gray-bg/dark-bg.</div>\n<div>\n\tFor gray background color please add extra class name&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">gray-bg</span>&nbsp; and For dark background color add class name&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">dark-bg</span>&nbsp;.</div>\n<pre class=\"html\">\n&lt;section class=&quot;section-padding gray-bg&quot;&gt;\n    &lt;div class=&quot;container&quot;&gt;\n\n    &lt;/div&gt;&lt;!-- /.container --&gt;\n&lt;/section&gt;</pre>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>Parallax Section</strong></div>\n<div>\n\t=========================</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tFor parallax section add class name&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">parallax-bg</span>&nbsp; with banner-wrapper&nbsp;<span style=\"color: rgb(165, 194, 97); font-family: Menlo; font-size: 16px; line-height: 19px; background-color: rgb(43, 43, 43);\">banner-wrapper</span>&nbsp;class and chose a banner number for background image. &nbsp;Add data-stellar-background-ratio=&quot;0.1 to 0.9&quot;</div>\n<div>\n\tYou can change background Image from CSS.</div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;section class=&quot;section-padding banner-wrapper parallax-bg overlay banner-7&quot; data-stellar-background-ratio=&quot;0.5&quot;&gt;\n    &lt;div class=&quot;container&quot;&gt;\n\n    &lt;/div&gt;&lt;!-- /.container --&gt;\n&lt;/section&gt;</pre>\n"},{"title": "Section Extra Classes","id": "section_extra_classes","content": "<div>\n\tWe have created some useful helper classes for you. Here are a few of them:</div>\n<pre class=\"css\">\n.radius-2 to .radius-4 (for border radious)\n.font-20 to .font-40 (for inline font-size)\n.line-height-40 (for inline line-height)\n.text-light (for light(300) text)\n.text-regular (for regular(400) text)\n.text-medium (for medium(500) text)\n.text-bold (for bold(700) text)\n.text-extrabold (for extra bold(900) text)\n\n.brand-color (for theme primary color)\n.brand-bg (for theme primary background color)\n\n.full-height (for device full height)\n.half-height(for device half height)</pre>\n<p>\t&nbsp;</p>\n<p>\t<strong>For Margin Classes:</strong></p>\n<pre class=\"css\">\n.no-margin {\n    margin: 0 !important;\n}\n\n.no-gutter &gt; [class*=&#39;col-&#39;] {\n    padding-right: 0;\n    padding-left: 0;\n}\n.no-padding {\n    padding: 0 !important;\n}\n.section-padding {\n    padding: 110px 0;\n}\n\n/*margin top*/\n.mt-15 {\n    margin-top: 15px;\n}\n.mt-20 {\n    margin-top: 20px;\n}\n.mt-30 {\n    margin-top: 30px;\n}\n.mt-40 {\n    margin-top: 40px;\n}\n.mt-50 {\n    margin-top: 50px;\n}\n.mt-80 {\n    margin-top: 80px;\n}\n.mt-100 {\n    margin-top: 100px;\n}\n/*margin bottom*/\n.mb-15 {\n    margin-bottom: 15px !important;\n}\n.mb-20 {\n    margin-bottom: 20px !important;\n}\n.mb-30 {\n    margin-bottom: 30px !important;\n}\n.mb-40 {\n    margin-bottom: 40px !important;\n}\n\n.mb-50 {\n    margin-bottom: 50px !important;\n}\n.mb-80 {\n    margin-bottom: 80px !important;\n}\n.mb-100 {\n    margin-bottom: 100px !important;\n}\n.mtb-50 {\n    margin: 50px 0 !important;\n}\n/*margin right*/\n.mr-10 {\n    margin-right: 10px;\n}\n.mr-20 {\n    margin-right: 20px;\n}</pre>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t<strong>For Padding Classes:</strong></p>\n<pre class=\"css\">\n/*padding-top*/\n.padding-top-50 {\n    padding-top: 50px;\n}\n.padding-top-70 {\n    padding-top: 70px;\n}\n.padding-top-90 {\n    padding-top: 90px;\n}\n.padding-top-100 {\n    padding-top: 100px;\n}\n.padding-top-110 {\n    padding-top: 110px;\n}\n.padding-top-120 {\n    padding-top: 120px;\n}\n.padding-top-160 {\n    padding-top: 160px;\n}\n/*padding-bottom*/\n.padding-bottom-20 {\n    padding-bottom: 20px;\n}\n.padding-bottom-30 {\n    padding-bottom: 30px;\n}\n.padding-bottom-50 {\n    padding-bottom: 50px;\n}\n.padding-bottom-70 {\n    padding-bottom: 70px;\n}\n.padding-bottom-80 {\n    padding-bottom: 80px;\n}\n.padding-bottom-90 {\n    padding-bottom: 90px;\n}\n.padding-bottom-100 {\n    padding-bottom: 100px;\n}\n\n.padding-bottom-110 {\n    padding-bottom: 110px;\n}\n.padding-bottom-120 {\n    padding-bottom: 120px;\n}\n\n@media screen and (min-width: 992px) {\n    /*padding left*/\n    .pl-100 {\n        padding-left: 100px;\n    }\n}\n\n/*padding top bottom*/\n.ptb-30 {\n    padding: 30px 0;\n}\n.ptb-50 {\n    padding: 50px 0;\n}\n.ptb-70 {\n    padding: 70px 0;\n}\n.ptb-90 {\n    padding-top: 90px;\n    padding-bottom: 90px;\n}\n.ptb-110 {\n    padding-top: 110px;\n    padding-bottom: 110px;\n}\n\n.ptb-120 {\n    padding-top: 120px;\n    padding-bottom: 120px;\n}\n.ptb-150 {\n    padding: 150px 0;\n}\n.ptb-190 {\n    padding: 190px 0;\n}\n\n/*Margin for small devices*/\n@media (max-width: 991px) {\n    .mb-sm-30 {\n        margin-bottom: 30px;\n    }\n    .mb-sm-50 {\n        margin-bottom: 50px;\n    }\n    .mt-sm-50 {\n        margin-top: 50px;\n    }\n}</pre>\n<div>\n\t&nbsp;</div>\n"},{"title": "Portfolio","id": "portfolio","content": "<p>\tPortfolio filter structure is following..</p>\n<pre class=\"html\">\n&lt;div class=&quot;portfolio-container text-center&quot;&gt;\n    &lt;ul class=&quot;portfolio-filter brand-filter&quot;&gt;\n        &lt;li class=&quot;active waves-effect waves-light&quot; data-group=&quot;all&quot;&gt;All&lt;/li&gt;\n        &lt;li class=&quot;waves-effect waves-light&quot; data-group=&quot;websites&quot;&gt;Websites&lt;/li&gt;\n        &lt;li class=&quot;waves-effect waves-light&quot; data-group=&quot;branding&quot;&gt;Branding&lt;/li&gt;\n        &lt;li class=&quot;waves-effect waves-light&quot; data-group=&quot;marketing&quot;&gt;Marketing&lt;/li&gt;\n        &lt;li class=&quot;waves-effect waves-light&quot; data-group=&quot;photography&quot;&gt;Photography&lt;/li&gt;\n    &lt;/ul&gt;\n&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\tPortfolio Item structure is following...</p>\n<pre class=\"html\">\n&lt;div class=&quot;portfolio col-4 gutter&quot;&gt;\n  &lt;div class=&quot;portfolio-item&quot; data-groups=&#39;[&quot;all&quot;, &quot;branding&quot;, &quot;photography&quot;]&#39;&gt;\n    &lt;div class=&quot;portfolio-wrapper&quot;&gt;\n      &lt;div class=&quot;thumb&quot;&gt;\n        &lt;div class=&quot;bg-overlay&quot;&gt;&lt;/div&gt;\n        &lt;img src=&quot;assets/img/portfolio/portfolio-1.jpg&quot; alt=&quot;&quot;&gt;\n        &lt;div class=&quot;portfolio-intro&quot;&gt;\n          &lt;div class=&quot;action-btn&quot;&gt;\n            &lt;a href=&quot;assets/img/portfolio/portfolio-5.jpg&quot; class=&quot;tt-lightbox&quot; title=&quot;&quot;&gt;&lt;i class=&quot;fa fa-search&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n          &lt;/div&gt;\n          &lt;h2&gt;&lt;a href=&quot;#&quot;&gt;Portfolio Title&lt;/a&gt;&lt;/h2&gt;\n          &lt;p&gt;&lt;a href=&quot;#&quot;&gt;Branding&lt;/a&gt;&lt;/p&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;&lt;!-- thumb --&gt;\n    &lt;/div&gt;&lt;!-- /.portfolio-wrapper --&gt;\n  &lt;/div&gt;&lt;!-- /.portfolio-item --&gt;\n&lt;/div&gt;</pre>\n<p>\tWe have 5 column option (2 column, 3 column, 4 column, 5 column and 6 column) with gutter and gutter less.</p>\n<p>\t&nbsp;</p>\n<div>\n\tIf you want to show 3 column portfolio items then code as follows</div>\n<div>\n\t&nbsp;</div>\n<pre class=\"html\">\n&lt;div class=&quot;portfolio col-3&quot;&gt;\n\n&lt;/div&gt;</pre>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(102, 102, 102);\">\n\tHere just added class name&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-size: 12pt; font-family: Menlo; vertical-align: baseline; color: rgb(165, 194, 97); line-height: 19px; background-color: rgb(43, 43, 43);\">col-3</span>&nbsp;into portfolio tag like &nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&lt;div&nbsp;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(186, 186, 186);\">class=</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(165, 194, 97);\">&quot;portfolio col-3 &quot;</span><span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-size: 12pt; font-family: Menlo; vertical-align: baseline; line-height: 19px; color: rgb(232, 191, 106);\">&gt;</span></p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(102, 102, 102);\">\n\tSimilarly you can set</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(102, 102, 102);\">\n\tcolumn 2&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-size: 16px; font-family: Menlo; vertical-align: baseline; color: rgb(165, 194, 97); line-height: 19px; background-color: rgb(43, 43, 43);\">col-2</span></p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(102, 102, 102);\">\n\tcolumn 4&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-size: 16px; font-family: Menlo; vertical-align: baseline; color: rgb(165, 194, 97); line-height: 19px; background-color: rgb(43, 43, 43);\">col-4</span></p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(102, 102, 102);\">\n\tcolumn 5&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-size: 16px; font-family: Menlo; vertical-align: baseline; color: rgb(165, 194, 97); line-height: 19px; background-color: rgb(43, 43, 43);\">col-5</span></p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(102, 102, 102);\">\n\tcolumn 6&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-size: 16px; font-family: Menlo; vertical-align: baseline; color: rgb(165, 194, 97); line-height: 19px; background-color: rgb(43, 43, 43);\">col-6</span></p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(102, 102, 102);\">\n\tand if you need gutter of those column the just add a&nbsp;<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: inherit; font-style: inherit; font-size: 12pt; font-family: Menlo; vertical-align: baseline; color: rgb(165, 194, 97); line-height: 19px; background-color: rgb(43, 43, 43);\">gutter</span>&nbsp;class name , like this...</p>\n<pre class=\"html\">\n&lt;div class=&quot;portfolio col-3 gutter&quot;&gt;\n\n&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<div>\n\t<strong>Portfolio with Title</strong></div>\n<div>\n\t==========================</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<span style=\"color: rgb(102, 102, 102); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;\">Portfolio with title structure are as follows</span></div>\n<div>\n\t<pre class=\"html\">\n&lt;div class=&quot;portfolio portfolio-with-title col-4&quot;&gt;\n    &lt;div class=&quot;portfolio-item&quot; data-groups=&#39;[&quot;all&quot;, &quot;branding&quot;, &quot;photography&quot;]&#39;&gt;\n      &lt;div class=&quot;portfolio-wrapper&quot;&gt;\n        &lt;div class=&quot;thumb&quot;&gt;\n          &lt;div class=&quot;bg-overlay brand-overlay&quot;&gt;&lt;/div&gt;\n          &lt;img src=&quot;assets/img/portfolio/portfolio-1.jpg&quot; alt=&quot;&quot;&gt;\n          &lt;div class=&quot;portfolio-intro&quot;&gt;\n            &lt;div class=&quot;action-btn&quot;&gt;\n              &lt;a href=&quot;assets/img/portfolio/portfolio-1.jpg&quot; class=&quot;tt-lightbox&quot; title=&quot;iOS Game Design&quot;&gt; &lt;i class=&quot;fa fa-search&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n            &lt;/div&gt;\n          &lt;/div&gt;\n        &lt;/div&gt;&lt;!-- thumb --&gt;\n        &lt;div class=&quot;portfolio-title&quot;&gt;\n            &lt;h2&gt;&lt;a href=&quot;#&quot;&gt;Creative Design&lt;/a&gt;&lt;/h2&gt;\n            &lt;p&gt;&lt;a href=&quot;#&quot;&gt;iOS Design&lt;/a&gt; &lt;/p&gt;\n        &lt;/div&gt;\n      &lt;/div&gt;&lt;!-- /.portfolio-wrapper --&gt;\n    &lt;/div&gt;&lt;!-- /.portfolio-item --&gt;\n&lt;/div&gt;</pre>\n\t<p>\t\t&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n\t<div>\n\t\t<strong>Portfolio Card Style</strong></div>\n\t<div>\n\t\t==========================</div>\n\t<div>\n\t\t&nbsp;</div>\n\t<div>\n\t\tPortfolio card style structure are as follows</div>\n\t<div>\n\t\t<pre class=\"html\">\n&lt;div class=&quot;portfolio-item&quot;&gt;\n  &lt;div class=&quot;card&quot;&gt;\n    &lt;div class=&quot;card-image waves-effect waves-block waves-light&quot;&gt;\n      &lt;img class=&quot;activator&quot; src=&quot;assets/img/portfolio/portfolio-1.jpg&quot; alt=&quot;image&quot;&gt;\n    &lt;/div&gt;\n    &lt;div class=&quot;card-content&quot;&gt;\n      &lt;span class=&quot;card-title activator&quot;&gt;Portfolio Title &lt;i class=&quot;fa fa-ellipsis-v right&quot;&gt;&lt;/i&gt; &lt;i class=&quot;fa fa-heart-o right&quot;&gt;&lt;/i&gt;&lt;/span&gt;\n      &lt;p&gt;&lt;a href=&quot;#&quot;&gt;Photography&lt;/a&gt;&lt;/p&gt;\n    &lt;/div&gt;\n\n    &lt;div class=&quot;card-reveal&quot;&gt;\n      &lt;span class=&quot;card-title&quot;&gt;Portfolio Title&lt;i class=&quot;material-icons right&quot;&gt;close&lt;/i&gt;&lt;/span&gt;\n      &lt;p&gt;&lt;a href=&quot;#&quot;&gt;Photography&lt;/a&gt;&lt;/p&gt;\n      &lt;p&gt;Authoritatively grow quality technologies for strategic sources.&lt;/p&gt;\n      &lt;a href=&quot;#&quot; class=&quot;readmore&quot;&gt;View full project&lt;/a&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;&lt;!-- /.card --&gt;\n&lt;/div&gt;&lt;!-- /.portfolio-item --&gt;</pre>\n\t</div>\n\t<p>\t\t&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n\t<p>\t\t&nbsp;</p>\n</div>\n<p>\t&nbsp;</p>\n"},{"title": "Revolution Slider","id": "revolution_slider","content": "<p>\tIn <strong>Matrox&nbsp;</strong>you will get booth version (version 4 and&nbsp;version 5) of the&nbsp;Revolution Slider. You can use any one of them which you like most. &nbsp;(You will get Revolution Slider version 4 with Construction Demo.)</p>\n<p>\tYou will get full documentation &nbsp;with relevant folder.<br>\n\t<br>\n\t<strong>Important:</strong>&nbsp; Some of the features of&nbsp;Revolution Slider (latest version 5.x) may not work in local server. If you want to work/test on local server you need to include extensions of revolution slider (You do not need to include on live server).</p>\n"},{"title": "Google Map","id": "google_map","content": "<div>\n\tWe used a dynamic google map in this template. You can easily change your location, address, map marker, map color and almost everything.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tFirst open script.js from assets/js/scripts.js find out &nbsp;/* ======= GOOGLE MAP ======= */ &nbsp;wrapper. &nbsp;</div>\n<div>\n\tPut your latitude longitude, put your map marker at $marker_url.</div>\n<div>\n\tWrite your address in &quot;contentString&quot;. &nbsp;</div>\n<div>\n\tYou can also change map color form &quot;stylers&quot; &nbsp;zoom options form &quot;map_zoom&quot;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tIf you unable to find <strong>latitude</strong> and <strong>longitude</strong> of your address. Please visit <a href=\"http://www.latlong.net/\">http://www.latlong.net/</a>&nbsp;you can easily generate.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;In html put the map &quot;id&quot; in any section and give it a min-height(your desired height)</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>HTML Markup:<br>\n\t===================</strong></div>\n<pre class=\"html\">\n&lt;!-- map-section --&gt;\n&lt;div id=&quot;myMap&quot; class=&quot;height-350&quot;&gt;&lt;/div&gt;\n&lt;!-- /.map-section --&gt;</pre>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>JS Markup:&nbsp;<br>\n\t================</strong></div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<pre class=\"js\">\n/* ======= GOOGLE MAP ======= */\n    jQuery(document).ready(function($) {\n        //set your google maps parameters\n        var $latitude = 40.716304,\n            $longitude = -73.995763,\n            $map_zoom = 16; /* ZOOM SETTING */\n\n        //google map custom marker icon \n        var $marker_url = &#39;assets/images/pin.png&#39;;\n\n        //we define here the style of the map\n        var style = [{\n            &quot;stylers&quot;: [{\n                &quot;hue&quot;: &quot;#03a9f4&quot;\n            }, {\n                &quot;saturation&quot;: 10\n            }, {\n                &quot;gamma&quot;: 2.15\n            }, {\n                &quot;lightness&quot;: 12\n            }]\n        }];\n        //set google map options\n        var map_options = {\n            center: new google.maps.LatLng($latitude, $longitude),\n            zoom: $map_zoom,\n            panControl: true,\n            zoomControl: true,\n            mapTypeControl: true,\n            streetViewControl: true,\n            mapTypeId: google.maps.MapTypeId.ROADMAP,\n            scrollwheel: false,\n            styles: style,\n        }\n        //inizialize the map\n        var map = new google.maps.Map(document.getElementById(&#39;myMap&#39;), map_options);\n        //add a custom marker to the map                \n        var marker = new google.maps.Marker({\n            position: new google.maps.LatLng($latitude, $longitude),\n            map: map,\n            visible: true,\n            icon: $marker_url,\n        });\n\n        var contentString = &#39;&lt;div id=&quot;mapcontent&quot;&gt;&#39; + &#39;&lt;p&gt;Matrox, 795 Folsom Ave, San Francisco.&lt;/p&gt;&lt;/div&gt;&#39;;\n        var infowindow = new google.maps.InfoWindow({\n            maxWidth: 320,\n            content: contentString\n        });\n\n        google.maps.event.addListener(marker, &#39;click&#39;, function() {\n             infowindow.open(map, marker);\n         });\n    });</pre>\n</div>\n<p>\t&nbsp;</p>\n"},{"title": "Contact Form","id": "contact_form","content": "<p>\tIn <strong>Matrox</strong>&nbsp;template there is full functional working contact form. We have also added a simple email template with this contact form.</p>\n<p>\tTo customize/change the email address please open &nbsp;&quot;sendemail.php&quot; file from root folder in any code editor . &nbsp;</p>\n<p>\tGo to the line number 9. &nbsp;There is a line:&nbsp;</p>\n<pre class=\"html\">\n$to         = &#39;youremail@gmail.com&#39;; <span style=\"color: rgb(147, 161, 161); line-height: 18px; background-color: rgb(247, 247, 249);\">//put your email here</span></pre>\n<p>\tReplace the existing email address with your own mailing address.</p>\n<p>\tThats it! your template is ready now for receive message from others via email.</p>\n"},{"title": "Adding Countdown Time","id": "adding_countdown_time","content": "<p>\t<span style=\"color: rgb(56, 56, 56); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;\">Configuring and Set-up countdown time is extremely easy.&nbsp;</span><span style=\"color: rgb(56, 56, 56); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;\">To customize/change the countdown time, please open script.js from assets/js/scripts.js in any code editor. &nbsp;Find out &nbsp;</span>/* === CountDown === */ wrapper,&nbsp;<span style=\"color: rgb(56, 56, 56); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;\">&nbsp;put your date in existing date.</span></p>\n<p>\t<span style=\"color: rgb(56, 56, 56); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;\">The script is look like:</span></p>\n<pre class=\"js\">\n        /* === CountDown === */\n        if ($(&#39;.countdown&#39;).length &gt; 0) {\n            $(&quot;.countdown&quot;).countdown({\n                date: &quot;31 december 2017 12:00:00&quot;,\n                format: &quot;on&quot;\n            });\n        }</pre>\n"},{"title": "Mailchimp Subscription","id": "mailchimp_subscription","content": "<div style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; color: rgb(56, 56, 56);\">\n\tWe used a dynamic full functional Mailchimp &nbsp;Newsletter Subscription form&nbsp; in this template. You can easily change your&nbsp;Mailchimp form post url.</div>\n<div style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; color: rgb(56, 56, 56);\">\n\t&nbsp;</div>\n<div style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; color: rgb(56, 56, 56);\">\n\tOpen &quot;ajaxchimp-config.js&quot;&nbsp;from assets/js/ folder.&nbsp;&nbsp;</div>\n<div style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; color: rgb(56, 56, 56);\">\n\tReplace exsisting url with your own mailchimp form post url inside the url: &quot;---&quot;.</div>\n<div style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; color: rgb(56, 56, 56);\">\n\t&nbsp;</div>\n<div style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; color: rgb(56, 56, 56);\">\n\t<pre class=\"js\">\n        if ($(&#39;.project-carousel&#39;).length &gt; 0) {\n            $(&#39;.mailchimp&#39;).ajaxChimp({\n                callback: mailchimpCallback,\n                //replace bellow url with your own mailchimp form post url inside the url: &quot;---&quot;.\n                url: &quot;http://trendytheme.us9.list-manage.com/subscribe/post?u=85ba3666ffb519396fbe64dc5&amp;amp;id=c335e5ec53&quot; \n            }); \n            function mailchimpCallback(resp) {\n                 if (resp.result === &#39;success&#39;) {\n                    $(&#39;.subscription-success&#39;).html(&#39;&lt;i class=&quot;fa fa-check&quot;&gt;&lt;/i&gt;&#39; + resp.msg).fadeIn(1000);\n                    $(&#39;.subscription-error&#39;).fadeOut(500);\n                } else if(resp.result === &#39;error&#39;) {\n\n                    $(&#39;.subscription-error&#39;).html(&#39;&lt;i class=&quot;fa fa-times&quot;&gt;&lt;/i&gt;&#39; + resp.msg).fadeIn(1000);\n                }  \n            }\n        }</pre>\n</div>\n<p>\t&nbsp;</p>\n"},{"title": "Changelog","id": "changelog","content": "<div>\n\t<strong>VERSION 1.4</strong></div>\n<div>\n\t======================</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>Added:</strong></div>\n<div>\n\t&nbsp;</div>\n<div>\n\t1. New Demo for &nbsp;SEO Agency (full website demo)</div>\n<div>\n\t2. New Demo for Coffee Shop (full onepage demo)</div>\n<div>\n\t3. Shortcode Pricing Table Page</div>\n<div>\n\t4. Shortcode Food Menu Page</div>\n<div>\n\t5. New shortcode featured services</div>\n<div>\n\t6. Multiple Map in single page (in CoffeeShop Demo)</div>\n<div>\n\t7. New Flaticon added in fonts folder(used in coffeeshop)</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>Fixed:</strong></div>\n<div>\n\t===================</div>\n<div>\n\t1. Optimaized some css</div>\n<div>\n\t2. Minor Slider issue fixed</div>\n<div>\n\t3. Minor css issue fixed</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>Updated:</strong> Documentation</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>VERSION 1.3</strong></div>\n<div>\n\t======================</div>\n<div>\n\tAdded JS</div>\n<div>\n\t1. ajaxchimp-config.js</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>Fixed:</strong></div>\n<div>\n\t===================</div>\n<div>\n\t1. Mail Chimp javascript conflict</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>VERSION 1.2</strong></div>\n<div>\n\t======================</div>\n<div>\n\t<strong>Added New Demo:</strong></div>\n<div>\n\t1. Event Landing Page</div>\n<div>\n\t2. ComingSoon Page</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>Integrated:</strong></div>\n<div>\n\t====================</div>\n<div>\n\t1. Mailchimp Subscription</div>\n<div>\n\t2. Count Down Script&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>Fixed:</strong></div>\n<div>\n\t===================</div>\n<div>\n\t1. Modified some section design</div>\n<div>\n\t2. Modified alert design</div>\n<div>\n\t3. Onepage menu issue fixed</div>\n<div>\n\t4. Minor issue fixed</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>VERSION 1.0</strong></div>\n<div>\n\t======================</div>\n<div>\n\t1. Initial release</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<strong>Instructions for Previous (VERSION 1.0) user:</strong></div>\n<div>\n\t======================================================</div>\n<div>\n\tIf you want to use new features from updated file you need to replace your css folder and js folder with the updated css and js folder.&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tWarning: You should keep a backup of your all previous file, replacing folders and files may replace your custom css and javascript.&nbsp;</div>\n"},{"title": "Sources & Credits","id": "sources_credits","content": "<h4>\n\tHTML/CSS<br>\n\t==============</h4>\n<p>\t<strong>Twitter Bootstrap</strong>:&nbsp;<a href=\"http://getbootstrap.com/\">http://getbootstrap.com/</a></p>\n<p>\t<strong>Material CSS:</strong>&nbsp;<a href=\"http://materializecss.com/\">http://materializecss.com/</a></p>\n<p>\t&nbsp;</p>\n<h4>\n\tFonts<br>\n\t=============</h4>\n<p>\t<strong>Google Fonts:</strong>&nbsp;<a href=\"http://www.google.com/webfonts\">http://www.google.com/webfonts</a></p>\n<p>\t<strong>Font Awesome:</strong>&nbsp;<a href=\"http://fontawesome.io/\">http://fontawesome.io/</a></p>\n<p>\t<strong>Material icons:</strong>&nbsp;<a href=\"https://design.google.com/icons/\">https://design.google.com/icons/</a></p>\n<p>\t&nbsp;</p>\n<h4>\n\tJavaScripts<br>\n\t============</h4>\n<p>\t<strong>jQuery:</strong>&nbsp;<a href=\"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js\">https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js</a></p>\n<p>\t<strong>jQuery Easing:</strong>&nbsp;<a href=\"http://gsgd.co.uk/sandbox/jquery/easing/\">http://gsgd.co.uk/sandbox/jquery/easing/</a></p>\n<p>\t<strong>sticky:</strong>&nbsp;<a href=\"https://github.com/garand/sticky\">https://github.com/garand/sticky</a></p>\n<p>\t<strong>smoothscroll:</strong>&nbsp;<a href=\"http://cferdinandi.github.io/smooth-scroll/\">http://cferdinandi.github.io/smooth-scroll/</a></p>\n<p>\t<strong>countTo:</strong>&nbsp;<a href=\"https://github.com/mhuggins/jquery-countTo\">https://github.com/mhuggins/jquery-countTo</a></p>\n<p>\t<strong>stellar:</strong>&nbsp;<a href=\"http://markdalgleish.com/projects/stellar.js/\">http://markdalgleish.com/projects/stellar.js/</a></p>\n<p>\t<strong>Shuffle:</strong>&nbsp;<a href=\"http://vestride.github.io/Shuffle/\">http://vestride.github.io/Shuffle/</a></p>\n<p>\t<strong>inview:</strong>&nbsp;<a href=\"https://github.com/protonet/jquery.inview\">https://github.com/protonet/jquery.inview</a></p>\n<p>\t<strong>owl.carousel:</strong>&nbsp;<a href=\"http://owlgraphic.com/owlcarousel/\">http://owlgraphic.com/owlcarousel/</a></p>\n<p>\t&nbsp;</p>\n<p>\t<strong>Image Credits:<br>\n\t================</strong></p>\n<p>\t<strong>Graphic Stock:&nbsp;</strong><a href=\"https://www.graphicstock.com/\">https://www.graphicstock.com/</a></p>\n<p>\t<strong>Freepik:</strong>&nbsp;<a href=\"http://www.freepik.com/\">http://www.freepik.com/</a></p>\n<p>\t<strong>Nothingtochance:&nbsp;</strong><a href=\"http://nothingtochance.co/\">http://nothingtochance.co/</a></p>\n<p>\t&nbsp;</p>\n<p>\t&nbsp;</p>\n<p>\t<strong>Photos and Videos:<br>\n\t===================</strong></p>\n<p>\t<strong>Important!&nbsp;</strong></p>\n<div>\n\tThe images used on the demo site are for demonstration purposes only and are not included in the download file. We have included placeholder images for each instance.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t&nbsp;</div>\n<div>\n\t<b>End:<br>\n\t==============</b></div>\n<div>\n\tOnce again, thank you very much for purchasing this template; &nbsp;we&#39;ll be glad to help you if you have any questions.</div>\n<div>\n\tIf you have a more general question relating to the templates on ThemeForest, please consider visiting the forums and asking your question in the &quot;Item Discussion&quot; section.</div>\n<div>\n\t&nbsp;</div>\n<div>\n\tThanks,</div>\n<div>\n\t<strong>Trendy Theme Team :)</strong></div>\n"}],"use_sub": false,"logo": "","favicon": "","customcss": "","easing": "swing","easingduration": "500","bgimage": "","bgrepeat": "repeat","bgattachment": "scroll","bgcolor": "FFFFFF","textcolor": "383838","linkcolor": "03A9F4","hrcolor1": "EBEBEB","hrcolor2": "FFFFFF","btncolor": "FFFFFF","btncolor1": "0088CC","btncolor2": "0044CC","sidebarbgimage": "","sidebarbgrepeat": "repeat","sidebarbgcolor": "DDDDDD","sidebartextcolor": "222222","sidebarlinkcolor": "444444","sidebaractivecolor": "444444","sidebaractivetextcolor": "DDDDDD","sidebarhrcolor1": "AAAAAA","sidebarhrcolor2": "EEEEEE","cufon": "","documentationttype": "default","itemURL": "","sendJSON": "","sendZIP": "","sendPWD": ""}